<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SF轻小说-全国最大的轻小说网站</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>
		
		<!-- Bootstrap -->
		<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<link href="${pageContext.request.contextPath }/css/login3.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row" id="a">
				<div class="col-lg-1"></div>
				<div class="col-lg-9">
					<div class="a_1">
						<img src="${pageContext.request.contextPath }/images/goods/logo.png"/>
					</div>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="row" id="b">
				<div class="col-lg-3"></div>
				<div class="col-lg-3">
					<form action="${pageContext.request.contextPath }/userServlet" method="post">
						<div class="b_1">
							<span><font style="color: hotpink">${mess }</font></span>
							<div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;昵称 <input type="text" placeholder="你在网站上显示的名字" size="30px" name="username" onblur="exist()"/>
                                <span id="usernamemsg"></span>
							</div>
							<div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码 <input type="password" placeholder="可输入数字符号美元符号等..." size="30px" name="password1"onblur="checkPassword()" />
							</div>
							<div>
								确认密码 <input type="password" placeholder="确认输入的密码" size="30px" name="password2" onblur="checkPasswordTrue()"/>
							</div>
							<div>
								电子邮箱 <input type="email" placeholder="格式：****@qq.com" size="30px" name="eamil" onblur="checkEmail()"/>
							</div>
							<div class="b_1_1">
								<input type="checkbox" size="2" style="zoom: 80%;" checked="checked"/> <font style="font-size: 5px;">我已阅读并接受<a href="${pageContext.request.contextPath}/page/Terms.html">"蜗牛互动传媒网络服务条款"</a></font>
							</div>
							<div>
								<button class="bt" type="submit" id="register">注册</button>
							</div>
						</form>
					</div>
				</div>
				<div class="col-lg-3">
					<div class="b_2_3">
						<img src="${pageContext.request.contextPath }/images/goods/a.png"/>
					</div>
				</div>
				<div class="col-lg-3"></div>
			</div>
			<div class="row" id="c">
				<div class="col-lg-1"></div>
				<div class="col-lg-10 text-center" style="height:35px;">

                    <div class="c_1">
                        <%@include file="footer1.jsp"%>
                     </div>
				</div>

				<div class="col-lg-1"></div>
			</div>
		</div>
	</body>
<script>
   /* //校验密码  6位

    function checkPass(){
        var  password  = document.getElementById("password").value;
        if(checkPassword()){
            if(password.length>0){
                var reg = /^\w{6}$/;
                var passSPan = document.getElementById("passId");
                if(reg.test(password)){
                    //符合规则
                    passSPan.innerHTML="正确".fontcolor("green");
                    return true;
                }else{
                    //不符合规则
                    passSPan.innerHTML="密码不符合规则".fontcolor("red");
                    return false;
                }
            }
        }
    }
    function checkPasswordTrue() {
        let password = $("#password").val();
        let passwordTrue = $("#passwordTrue").val();
        if(checkPass()){
            if(passwordTrue === password){
                $("#passwordTrueMsg").html("<span style='color: green'>密码输入一致</span>");
            }else{
                $("#passwordTrueMsg").html("<span style='color: red'>两次密码不一致</span>");
            }
        }
    }

    function checkCode() {
        let code = $("#checkCode1").val();
        var checkCode =${sessionScope.checkCode};
        alert( checkCode);
        /!*$.post("${pageContext.request.contextPath}/checkCodeServlet","",function (data) {
                data.v
        })*!/
    }
    function change() {
        $("#checkimage").prop("src","${pageContext.request.contextPath}/checkCodeServlet?id="+new Date().getTime());
    }
    // alert("用户名不能为空");
    function checkUsername() {
        //校验用户名是否为空
        let username = $("#username").val();
        if(username){
            $("#usernamemsg").html("<span> 请填写用户名:格式为2-20个字符，可以为字符，数字下划线和中文</span>");
            return true;
        }else{
            $("#usernamemsg").html("<span style='color: red'>用户名不能为空</span>");
            return false;
        }
    }
    function exist() {
        //判断用户名是否存在
        let username = $("#username").val();
        if(checkUsername()){
            $.post("${pageContext.request.contextPath}/user/checkUsername","username="+username,function (data) {
                if(data.flag){
                    $("#usernamemsg").html("<span style='color: green'>"+data.massage+"</span>");
                }else {
                    $("#usernamemsg").html("<span style='color: red'>"+data.massage+"</span>");
                }
            },"json")
        }
    }
    // alert("密码不能为空");
    function checkPassword() {
        //校验密码是否为空
        let password = $("#password").val();
        if(password){
            $("#passwordmsg").html("<span>请填写登录密码:6-32个字符</span>");
            return true;
        }else{
            $("#passwordmsg").html("<span style='color: red'>密码不能为空</span>");
            return false;
        }
    }*/
</script>
</html>
